<template>
	<view>
		<u-navbar title="修改密码" :autoBack="true" placeholder>
		</u-navbar>
		<view class="p8">
			<view class="bg-fff br-8 py-8 px-16">
				<view class="flex-align py-16">
					<view class="flex-1 fw-500 fs-14 color-5F6865">旧密码</view>
					<input type="text" password v-model="formData.oldPassword" placeholder="请输入旧密码" placeholder-class="input-css" />
				</view>
				<view class="flex-align py-16">
					<view class="flex-1 fw-500 fs-14 color-5F6865">新密码</view>
					<input type="text" password v-model="formData.newPassword" placeholder="请输入新密码" placeholder-class="input-css" />
				</view>
				<view class="flex-align py-16">
					<view class="flex-1 fw-500 fs-14 color-5F6865">确认新密码</view>
					<input type="text" password v-model="formData.confirmPassword" placeholder="请再次输入新密码" placeholder-class="input-css" />
				</view>
			</view>
		</view>
		<view class="footer bg-fff px-10 pt-8 flex-align"
			:style="{paddingBottom:`${$f.sys().safeAreaBottom ? $f.sys().safeAreaBottom : 10}px`}">
			<u-button text="确认修改" @click="$u.debounce(submitPassword,500,true)"
				:customStyle="`background-color: #24C98F;color:#fff`"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				}
			}
		},
		methods: {
			// 表单验证
			validateForm() {
				if (!this.formData.oldPassword) {
					uni.showToast({
						title: '请输入旧密码',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.newPassword) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					});
					return false;
				}
				if (this.formData.newPassword.length < 6 || this.formData.newPassword.length > 20) {
					uni.showToast({
						title: '新密码长度必须在6-20位之间',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.confirmPassword) {
					uni.showToast({
						title: '请确认新密码',
						icon: 'none'
					});
					return false;
				}
				if (this.formData.newPassword !== this.formData.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return false;
				}
				if (this.formData.oldPassword === this.formData.newPassword) {
					uni.showToast({
						title: '新密码不能与旧密码相同',
						icon: 'none'
					});
					return false;
				}

				return true;
			},
			// 提交修改密码
			submitPassword() {
				if (!this.validateForm()) {
					return;
				}
				this.$api.post({
					url: '/companion/updateInfo/password',
					data: {
						oldPassword: this.formData.oldPassword,
						newPassword: this.formData.newPassword
					},
					loadingTip: '修改中...',
					success: (res) => {
						uni.showToast({
							title: '密码修改成功',
							icon: 'success',
							mask:true
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					},
					fail: (err) => {
						let errorMsg = '修改失败，请稍后重试';
						if (err.data && err.data.msg) {
							errorMsg = err.data.msg;
						} else if (err.msg) {
							errorMsg = err.msg;
						}
						uni.showToast({
							title: errorMsg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	input {
		text-align: right;
		font-size: 28rpx;
	}

	.input-css {
		font-weight: 400;
		font-size: 28rpx;
		color: #999;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid #0000000D;
		backdrop-filter: blur(4px);
	}
</style>
